<template>
  <div>
      <!-- for练习 -->
      <ul>
        <li v-for="(skill,i) in skills " :key="i">{{skill}}</li>
      </ul>

      <table border="1">
          <thead>
            <tr>
              <td>姓名</td>
              <td>年龄</td>
            </tr>
          </thead>
          <tbody>
            <tr v-for="(emp,i) in emps" :key="i">
              <td>{{emp.name}}</td>
              <td>{{emp.age}}</td>
            </tr>
          </tbody>
      </table>
  </div>
</template>

<script>
  export default {
    data() {
      return {
        skills: ['dom','jquery','vue','express'],
        emps:[
          {name:'蔡徐坤0',age:18},
          {name:'蔡徐坤1',age:19},
          {name:'蔡徐坤2',age:20},
          {name:'蔡徐坤3',age:21},
          {name:'蔡徐坤4',age:22},
          {name:'蔡徐坤5',age:23}
        ]
      }
    },
  }
</script>

<style lang="scss" scoped>
// 如果页面报错：关键词 sass-loader,说明生成项目包时没有勾选css预编译选项，需要重新按照教程生成项目包 或 下载老师提供的压缩包
// 支持scss语法
table{
  border-collapse: collapse;
  thead{
    background-color: darkblue;
    color: white;
  }
  td{
    border:1px solid gray;
    padding: 10px 20px ;
  }
}
</style>